<template>
  <div>
    <a-transfer
        :rowKey="record => record.eventId"
        :data-source="mockData"
        :target-keys="targetKeys"
        :disabled="disabled"
        :show-search="showSearch"
        :filter-option="(inputValue, item) => item.eventName.indexOf(inputValue) !== -1"
        :show-select-all="false"
        @change="onChange"
    >
      <template
          #children="{
          direction,
          filteredItems,
          selectedKeys,
          disabled: listDisabled,
          onItemSelectAll,
          onItemSelect,
        }"
      >
        <a-table
            :row-selection="
            getRowSelection({
              disabled: listDisabled,
              selectedKeys,
              onItemSelectAll,
              onItemSelect,
            })
          "
            :columns="direction === 'left' ? leftColumns : rightColumns"
            :data-source="filteredItems"
            size="small"
            :style="{ pointerEvents: listDisabled ? 'none' : null }"
            :custom-row="
            ({ key, disabled: itemDisabled }) => ({
              onClick: () => {
                if (itemDisabled || listDisabled) return;
                onItemSelect(key, !selectedKeys.includes(key));
              },
            })
          "
        />
      </template>
    </a-transfer>
    <a-switch
        un-checked-children="disabled"
        checked-children="disabled"
        v-model:checked="disabled"
        style="margin-top: 16px"
    />

    <a-switch
        un-checked-children="开启搜索"
        checked-children="关闭搜索"
        v-model:checked="showSearch"
        style="margin-top: 16px"
    />
  </div>
</template>
<script lang="ts">
import { difference } from 'lodash-es';
import {defineComponent, ref, defineProps, watch, type PropType} from 'vue';
import {Api} from "@/api";

const {userObj} = defineProps({
  userObj: {
    type: Object as PropType<any>,
  }
});
watch(() => userObj, (newValue, oldValue) => {
  // 执行相应的操作
  console.log(newValue)
  console.log(oldValue)
})

interface MockData {
  key: string;
  eventName: string;
  disabled: boolean;
}
type tableColumn = Record<string, string>;


let eventHandlerList = await Api.eventListServe.getEventHandlerList();
let mockData: MockData[] = [];
mockData = eventHandlerList.records

const originTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);

const leftTableColumns = [
  {
    dataIndex: 'eventName',
    title: '事件名称',
  },
];
const rightTableColumns = [
  {
    dataIndex: 'eventName',
    title: '事件名称',
  },
];

export default defineComponent({
  setup() {
    const targetKeys = ref<string[]>(originTargetKeys);
    const disabled = ref<boolean>(false);
    const showSearch = ref<boolean>(false);
    const leftColumns = ref<tableColumn[]>(leftTableColumns);
    const rightColumns = ref<tableColumn[]>(rightTableColumns);

    const onChange = (nextTargetKeys: string[]) => {
      targetKeys.value = nextTargetKeys;
      console.log(targetKeys)
      console.log(nextTargetKeys)

    };

    const getRowSelection = ({ disabled, selectedKeys, onItemSelectAll, onItemSelect, }: Record<string, any>) => {
      return {
        getCheckboxProps: (item: Record<string, string | boolean>) => ({
          disabled: disabled || item.disabled,
        }),
        onSelectAll(selected: boolean, selectedRows: Record<string, string | boolean>[]) {
          const treeSelectedKeys = selectedRows
              // .filter(item => !item.disabled)
              .map(({ key }) => key);
          const diffKeys = selected
              ? difference(treeSelectedKeys, selectedKeys)
              : difference(selectedKeys, treeSelectedKeys);
          console.log(diffKeys, selected)
          onItemSelectAll(diffKeys, selected);
        },
        onSelect({ key }: Record<string, string>, selected: boolean) {
          console.log(key, selected)
          onItemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
      };
    };
    return {
      mockData,
      targetKeys,
      disabled,
      showSearch,
      leftColumns,
      rightColumns,
      onChange,
      getRowSelection,
    };
  },
});
</script>